<template>
  <div style="padding:30px;">
    <div style="margin-top: 15px;">
      <el-input
        placeholder="请输入人员id"
        v-model="soltid"
        style="width:25%;margin-bottom:15px"
        class="input-with-select"
      >
        <el-button @click="cxid" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div class="demonstration" style="margin-bottom: 15px;">
      <el-button @click="print" type="primary" size="mini" style="margin:30px auto;">打印</el-button>

      <input title="请选择文件" value="请选择文件" type="file" class="file" />
      <el-button @click="fileUpload1" type="primary" size="mini" style="margin:30px auto;">导入</el-button>
      <el-button @click="download" type="primary" size="mini" style="margin:30px auto;">下载模板</el-button>
    </div>
    <el-table ref="print" :data="tableData" border style="width: 100%;align" v-loading="loading">
      <el-table-column align="center" label="ID" width="90" prop="id"></el-table-column>
      <el-table-column align="center" label="账号名称" width="100" prop="account"></el-table-column>
      <el-table-column align="center" label="人员姓名" width="100" prop="name"></el-table-column>
      <el-table-column align="center" label="角色" width="100" prop="roleName"></el-table-column>
      <el-table-column align="center" label="所属公司" width="100" prop="company"></el-table-column>
      <el-table-column align="center" label="所属分公司" width="100" prop="branch"></el-table-column>
      <el-table-column align="center" label="所属部门" width="100" prop="department"></el-table-column>
      <el-table-column align="center" label="人员电话" width="180" prop="telephone"></el-table-column>
      <el-table-column align="center" label="添加时间" width="100" prop="createTime"></el-table-column>
      <el-table-column v-if="noprint" align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <v-pagination
      style="margin-top:20px"
      @page-change="pageChange"
      @page-size-change="pageSizeChange"
      :total="total"
      :page-size="pageSize"
      :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"
    ></v-pagination>

    <!-- 我是编辑的表单页面 -->
    <el-dialog title="编辑人员" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item label="账号名称" prop="account" required>
          <el-col :span="22">
            <el-input v-model="ruleForm.account"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="人员姓名" prop="name">
          <el-col :span="22">
            <el-input v-model="ruleForm.name"></el-input>
          </el-col>
        </el-form-item>

        <!-- <el-form-item label="账号密码" prop="password">
          <el-col :span="22">
            <el-input type="password" v-model="ruleForm.password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="请确认密码" prop="rppassword">
          <el-col :span="22">
            <el-input type="password" v-model="ruleForm.rppassword"></el-input>
          </el-col>
        </el-form-item>-->
        <el-form-item label="角色" prop="role" required>
          <el-select v-model="ruleForm.role" placeholder="请选择人员角色">
            <el-option label="管理人员" value="1"></el-option>
            <el-option label="财务人员" value="2"></el-option>
            <el-option label="项目人员" value="3"></el-option>
          </el-select>
        </el-form-item>
        <!-- 这里应该有个总公司的id的，可能是默认带了 -->
        <el-form-item label="人员电话" prop="telephone">
          <el-col :span="22">
            <el-input v-model="ruleForm.telephone"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item v-if="qx.level>3" label="分公司" prop="bid">
          <el-select @change="slfgs" v-model="ruleForm.bid" placeholder="请选择分公司">
            <el-option v-for="item in coms" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="qx.level>2" label="部门" prop="pid">
          <el-select @change="slbm" v-model="ruleForm.pid" placeholder="请选择部门">
            <el-option v-for="item in coms1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="公司" prop="region">
          <el-select @change="slgs" v-model="ruleForm.cid" placeholder="请选择公司">
            <el-option :label="qx.companyname" :value="qx.cid"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="qx.level==4" label="分公司" prop="bid">
          <el-select @change="slfgs" v-model="ruleForm.bid" placeholder="请选择分公司">
            <el-option v-for="item in coms" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="qx.level!=4" label="分公司" prop="bid" required>
          <el-select v-model="ruleForm.bid" placeholder="请选择分公司">
            <el-option :label="qx.branchname" :value="qx.bid"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="qx.level>2" label="部门" prop="pid">
          <el-select @change="slbm" v-model="ruleForm.pid" placeholder="请选择部门">
            <el-option v-for="item in coms1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="qx.level<=2" label="部门" prop="pid">
          <el-select v-model="ruleForm.pid" placeholder="请选择部门">
            <el-option :label="qx.pid" :value="qx.pid"></el-option>
          </el-select>
        </el-form-item>-->
        <!-- <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<!-- 引入组件库 -->

<script>
import { hqfgs } from "@/api/zuzhijiagou";
import { getToken, gettype, getid } from "@/utils/auth";
import request from "@/utils/request";
import axios from "axios";
var formData = new FormData(); // 声明一个FormData对象
var formData = new window.FormData();
export default {
  name: "DragTable",

  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      formData: "",
      noprint: true,
      soltid: "",
      loading: true,
      formLabelWidth: "120px",
      dialogFormVisible: false,
      list: null,
      pm: {
        cid: "",
        page: 1,
        pageSize: 10
      },

      loading: false,
      pageIndex: 1,
      pageSize: 10,
      total: 1,
      qx: [],
      tableData: [],
      coms: [],
      coms1: [],
      ruleForm: {
        account: "",
        aid: "",
        cid: "",
        createTime: "",
        del: "",
        id: "",
        name: "",
        password: "",
        rppassword: "",
        pid: "",
        telephone: "",
        role: ""
      },

      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        rppassword: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ],
        person: [
          {
            required: true,
            message: "请输入分公司负责人的姓名",
            trigger: "blur"
          }
        ],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11手机号", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    var id = getid();
    this.pm.cid = id;

    this.findList();
    this.selectdown();
    this.getqx();
  },
  methods: {
    findList() {
      var that = this;
      if (that.qx.level == 4) {
        var id = that.qx.cid;
      } else if (that.qx.level == 3) {
        var id = that.qx.bid;
      } else if (that.qx.level == 2) {
        var id = that.qx.pid;
      }
      var resdata = {
        id: id,
        page: this.pageIndex,
        pageSize: this.pageSize,
        tokens: getToken()
      };
      // 模拟后台接口
      this.loading = true;

      request("person/select", {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: {
          id: this.pm.cid,
          page: this.pageIndex,
          pageSize: this.pageSize,
          tokens: getToken()
        }
      }).then(function(response) {
        console.log(response);
        that.tableData = response.data.object;
        console.log(111111);

        that.total = response.data.total;
        that.loading = false;
      });

      // hqfgs(resdata)
      //   .then(response => {
      //     console.log(response);
      //     this.tableData = response.data.object;
      //     console.log(111111);

      //     this.total = response.data.total;
      //     this.loading = false;
      //   })
      //   .catch(e => {
      //     this.loading = false;
      //   });
    },
    // 编辑的操作
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.ruleForm = row;
    },
    // 删除的操作
    handleDelete(index, row) {
      var that = this;
      console.log(index, row);
      this.$confirm("此操作将永久删除该人员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request(`person/del/${row.id}`, {
            method: "get",
            headers: { "Content-Type": "application/json", token: getToken() },
            params: ""
          }).then(function(response) {
            console.log(response);

            // that.$message({
            //   type: "success",
            //   message: "删除成功!"
            // });
            that.findList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    print() {
      this.noprint = false;
      console.log(this.noprint);
      // this.w = this.wp;
      setTimeout(() => {
        this.$print(this.$refs.print);
      }, 500);
      setTimeout(() => {
        this.noprint = true;
        // this.w = this.wf;
      }, 1500);
    },

    fileUpload() {
      var _this = this;
      var formData = new window.FormData();
      // formData.append("uploadFile", $("input[name='uploadFile']")[0].files[0]);
      formData.append("file", this.files, this.fileName);
      console.log(formData);
      _this.formData = formData;
    },
    // 模板下载
    download() {
      window.location.href = this.$host + "/downloadtemplate?filename=2.xlsx";
    },
    fileUpload1(a) {
      var _this = this;
      formData.append(
        "file",
        document.querySelector("input[type=file]").files[0]
      ); // 'file' 这个名字要和后台获取文件的名字一样;

      request("/person/import", {
        method: "post",
        headers: { "Content-Type": "multipart/form-data" },
        data: formData
      })
        .then(function(response) {
          console.log(response);
          alert(response.data.message);
        })
        .catch(function(reason) {});
    },
  
  

    cxid() {
      var that = this;

      if (this.soltid == "") {
        this.findList();
      } else {
        request(`person/find/${this.soltid}`, {
          method: "get",
          headers: {
            "Content-Type": "application/json",
            token: getToken()
          },
          params: ""
        }).then(res => {
          console.log(232323);
          console.log(res.data.object);
          this.tableData = res.data.object;
          this.$message({
            type: "success",
            message: "加载成功!"
          });
        });
      }
    },
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.findList();
      console.log(pageIndex);
    },
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.findList();
    },
    // 编辑删除的操作

    // 详细的编辑过程
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("确认提交!");
          // 添加公司的方法
          // axios.post(
          //   that.$host + "person/updata",
          //   { branch: that.ruleForm },
          //   {
          //     headers: {
          //       "Content-Type": "application/json",
          //       token: getToken(),
          //       type: 1
          //     }
          //   }
          // );

          request("person/update", {
            method: "post",
            headers: { "Content-Type": "application/json" },
            data: that.ruleForm
          }).then(function(response) {
            that.dialogFormVisible = false;
            console.log(response);
            that.findList();
            that.$message({
              type: "success",
              message: "编辑成功!"
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },
    selectdown() {
      console.log("add");
      var that = this;
      var p = {
        tokens: getToken()
      };
      request(`branch/selectdown`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.coms = response.data.object;
          } else {
            that.fail = true;
            that.failc = response.message;
          }
        })
        .catch(error => {
          this.loading = false;
          that.fail = true;
          that.failc = response.message;
          console.log(error); //异常
        });
    },
    // 获取部门列表
    selectdown1(a) {
      console.log("add");
      var that = this;
      var p = {
        tokens: getToken(),
        bid: a
      };
      request(`department/selectComboBox`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.coms1 = response.data.object;
          } else {
            that.fail = true;
            that.failc = response.message;
          }
        })
        .catch(error => {
          this.loading = false;
          that.fail = true;
          that.failc = response.message;
          console.log(error); //异常
        });
    },
    slfgs(selVal) {
      this.fgsid = selVal;
      console.log(selVal);
      this.selectdown1(selVal);
      // this.dialogVisible = true;
    },
    slbm(selVal) {
      this.bmid = selVal;
      // this.dialogVisible = true;
    },
    getqx() {
      var that = this;
      var p = {
        tokens: getToken()
      };
      request(`person/rolelist`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: p
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.qx = response.data.object;
            console.log(that.qx.level);
            var level = that.qx;

            if (level == 4) {
              that.ruleForm.cid = level.cid;
            } else if (level == 3) {
              that.ruleForm.cid = level.cid;
              that.ruleForm.bid = level.bid;
            } else if (level == 2) {
              that.ruleForm.cid = level.cid;
              that.ruleForm.bid = level.bid;
              that.ruleForm.pid = level.pid;
            }
          } else {
            that.fail = true;
          }
        })
        .catch(error => {
          console.log(error); //异常
        });
    }
  }
};
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
.el-alert__content {
  width: 100%;
}
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}
.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d {
  margin-top: 15px;
}
/* .el-alert__content {
  width: 50%;
} */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.el-alert__content {
  width: 100%;
}
</style>
